<template>
	<view>
		<view class="tabBox">
			<view @click="listBut" :class="tabstyle">
				订单列表
			</view>
			<view @click="orderBut" :class="tabstyleb">
				售后订单
			</view>
		</view>
		<view class="searchBox">
			<image class="searchIcon" src="../../../static/dating/search_icon.png"></image>
			<text class="frame"></text>
			<input class="searchKeywords" type="text" placeholder="请输入关键词进行搜索" />
		</view>
		<view class="main">
			<view v-show="isShowb" class="tabSwitchBox">
				<view :class="{outerLayer:index==num}" @click="qiehuan(index,item)" v-for="(item,index) in taborderData" :key="index">
					<view class="tabcontent">
					{{item.tabFont}}
				    </view>
				</view>
				
			</view>
			<view v-show="isShow" class="tabSwitchBoxa">
				<view :class="{outerLayer:index==num}" @click="qiehuan(index,item)" v-for="(item,index) in orderlistData" :key="index">
					<view class="tabcontent" >
					{{item.tabFont}}
					<image class="gengduo" v-if="index==3" src="../../../static/user2/gengduo.png"></image>
				</view>
				</view>
				
			</view>
			<view class="commodityBox" v-for="(item,index) in infoData" :key="index">
				<view class="commodityhead">
					<image class="userProfile" :src="item.userProfile"></image>
					<text class="username">{{item.username}}</text>
					<text class="status">{{item.status}}</text>
				</view>
				<image class="commodityImg" :src="item.commodityImg"></image>
				<view class="commodityname tuodiandiandian">
					{{item.commodityname}}
				</view>
				<text class="commodityPricw">￥{{item.commodityPricw}}</text>
				<text class="commodityNum">x{{item.commodityNum}}</text>
				<text class="statusb">
					{{item.statusb}}
				</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:0,
				isShow: false,
				isShowb: true,
				tabstyle: 'tablistb',
				tabstyleb: 'tablist',
				taborderData: [{
					tabFont: '全部'
				}, {
					tabFont: '待审核'
				}, {
					tabFont: '待买家处理'
				}, {
					tabFont: '带商家处理'
				}, {
					tabFont: '已完成',

				}],
				orderlistData: [{
					tabFont: '全部'
				}, {
					tabFont: '待付款'
				}, {
					tabFont: '待核销'
				}, {
					tabFont: '更多状态'
				}],
				infoData: [{
					userProfile: '../../../static/user/photo.png',
					username: '用户名',
					status: '待审核',
					commodityImg: '../../../static/shangcheng/chanping.png',
					commodityname: 'Gucci印花兜帽卫衣',
					commodityPricw: '108.90',
					statusb: '通过审核',
					commodityNum: '1'
				}, {
					userProfile: '../../../static/user/photo.png',
					username: '用户名',
					status: '待审核',
					commodityImg: '../../../static/shangcheng/chanping.png',
					commodityname: 'Gucci印花兜帽卫衣',
					commodityPricw: '108.90',
					statusb: '通过审核',
					commodityNum: '1'
				}, {
					userProfile: '../../../static/user/photo.png',
					username: '用户名',
					status: '待审核',
					commodityImg: '../../../static/shangcheng/chanping.png',
					commodityname: 'Gucci印花兜帽卫衣',
					commodityPricw: '108.90',
					statusb: '通过审核',
					commodityNum: '1'
				}, ]
			};
		},
		methods: {
			listBut() {
				this.tabstyle = 'tablistb';
				this.tabstyleb = 'tablist';
				this.isShow = true;
				this.isShowb = false;
			},
			orderBut() {
				this.tabstyle = 'tablist';
				this.tabstyleb = 'tablistb';
				this.isShow = false;
				this.isShowb = true;
			},
			qiehuan(index,item){
				this.num=index
			}
		}
	}
</script>

<style lang="scss">
	.tabBox {
		width: 750rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
	}

	.tablist {
		width: 370rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.tablistb {
		width: 370rpx;
		height: 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(115, 34, 216, 1);
	}

	.tablist:nth-child(1) {
		border-right: 1rpx solid #C7C7C7;
	}

	.searchBox {
		width: 710rpx;
		height: 60rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 30rpx;
		position: relative;
		left: 20rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		display: flex;
		align-items: center;
	}

	.searchIcon {
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		left: 20rpx;
	}

	.frame {
		width: 2rpx;
		height: 20rpx;
		background: rgba(102, 102, 102, 1);
		position: absolute;
		left: 60rpx;
	}

	.searchKeywords {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(156, 156, 156, 1);
		position: absolute;
		left: 74rpx;
	}

	.main {
		width: 750rpx;
		margin-bottom: 30rpx;
		position: relative;
	}

	.tabSwitchBox {
		width: 750rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.tabSwitchBoxa {
		width: 750rpx;
		height: 80rpx;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
     .outerLayer{
		 border-bottom: 6rpx solid #7322D8;
		 color: #7322D8;
		 }
	.tabcontent {
		font-size: 28rpx;
		padding: 20rpx 23rpx;
	}

	.gengduo {
		width: 22rpx;
		height: 22rpx;
		margin-left: 10rpx;

	}

	.commodityBox {
		width: 710rpx;
		height: 255rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.commodityhead {
		width: 650rpx;
		height: 80rpx;
		border-bottom: 1rpx solid #E5E5E5;
		position: relative;
		left: 30rpx;
		display: flex;
		align-items: center;
	}

	.userProfile {
		width: 40rpx;
		height: 40rpx;
		box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(88, 64, 150, 0.05);
	}

	.username {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: relative;
		left: 15rpx;
	}

	.status {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		position: absolute;
		right: 0rpx;
	}

	.commodityImg {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: 103rpx;
		left: 32rpx;
	}

	.commodityname {
		width: 400rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 178rpx;
		top: 103rpx;
	}

	.commodityPricw {
		font-size: 30rpx;
		font-family: FZHei-B01S;
		font-weight: 400;
		color: rgba(255, 59, 48, 1);
		position: absolute;
		bottom: 31rpx;
		left: 178rpx;
	}

	.commodityNum {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(142, 142, 142, 1);
		position: absolute;
		top: 106rpx;
		right: 37rpx;
	}

	.statusb {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(115, 34, 216, 1);
		padding-top: 3rpx;
		padding-bottom: 3rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border: 1rpx solid #7322D8;
		border-radius: 18rpx;
		position: absolute;
		bottom: 26rpx;
		right: 30rpx;
	}
</style>
